normalize-svg-path

What is normalize-svg-path?

The normalize-svg-path npm package is used to normalize SVG path data. It converts all path commands to their absolute forms and can also convert shorthand commands to their full forms. This is useful for simplifying the manipulation and analysis of SVG path data.

What are normalize-svg-path's main functionalities?

Convert all path commands to absolute

This feature converts all relative path commands to their absolute equivalents. For example, 'h 80' becomes 'H 90' if the current point is (10, 10).

const normalize = require('normalize-svg-path');
const pathData = 'M10 10 h 80 v 80 h -80 Z';
const normalizedPath = normalize(pathData);
console.log(normalizedPath);

Expand shorthand commands

This feature expands shorthand commands to their full forms. For example, 'h 80' becomes 'H 90' and 'v 80' becomes 'V 90'.

const normalize = require('normalize-svg-path');
const pathData = 'M10 10 h 80 v 80 h -80 Z';
const expandedPath = normalize(pathData, { expandShorthand: true });
console.log(expandedPath);

Other packages similar to normalize-svg-path

svg-path-parser

The svg-path-parser package parses SVG path data into a more manipulable format. It breaks down the path data into an array of command objects, making it easier to analyze and manipulate. Unlike normalize-svg-path, it focuses more on parsing rather than normalizing the path data.

svg-pathdata

The svg-pathdata package provides a set of tools to parse, encode, transform, and render SVG path data. It offers more comprehensive functionality compared to normalize-svg-path, including the ability to apply transformations and render the path data.

README

normalize-svg-path

Convert all segments in a path to curves. Usefull if you intend to animate one shape to another. By defining all segments with curves instead of a mix of lines, arcs, and curves tweening becomes much simpler. It could also help you rewrite your SVG code according to the principles of narcissistic design.

Usage

var parse = require('parse-svg-path')
var abs = require('abs-svg-path')
var normalize = require('normalize-svg-path')

var segments = normalize(abs(parse('M0 0L10 10A10 10 0 0 0 20 20Z')))

API

normalize(path)

Translate each segment in path to an equivalent cubic bézier curve. The input path must be absolute.

normalize([['L',1,2]]) // => [['C',0,0,1,2,1,2]]